<template>
  <gui-page :custom-header="true">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">成绩填写</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view>
        <form @submit="submit">
          <view class="gui-bg-gray gui-dark-bg-level-3 gui-padding-x">
            <view style="padding-top: 20rpx">
              <text>高考年份</text>
            </view>
            <view class="gui-bg-white gui-margin-top-small" style="padding: 15rpx">
              <picker mode="selector" :range="gender" @change="pickerChange">
                <view class="gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center">
                  <text class="gui-text gui-secondary-text">{{ gender[genderIndex] }}</text>
                  <text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
                </view>
              </picker>
            </view>
          </view>
          <view style="height: 28rpx" />
          <view class="gui-bg-gray gui-dark-bg-level-3 gui-padding-x">
            <view>
              <text>首选科目</text>
              <text class="gui-text-small gui-text-center gui-margin-x gui-color-gray">(2选1)</text>
            </view>
            <view class="gui-bg-gray gui-margin-top-small" style="padding: 15rpx">
              <gui-stags
                :default-class="['gui-bg-white']"
                :line-height="2.2"
                :padding="30"
                :tags="tags1"
                @change="(e) => (formData.text = e.text)"
              />
            </view>
          </view>
          <view style="height: 28rpx" />
          <view class="gui-bg-gray gui-dark-bg-level-3 gui-padding-x">
            <view>
              <text>首选科目</text>
              <text class="gui-text-small gui-color-gray gui-text-center gui-margin-x">(4选2)</text>
            </view>
            <view class="gui-margin-top-small" style="padding: 15rpx">
              <gui-stags
                :default-class="['gui-bg-white']"
                :line-height="2.2"
                :padding="30"
                :selected-num="2"
                :tags="tags2"
                type="checkbox"
                @change="change2"
              />
            </view>
          </view>
          <view style="height: 28rpx" />
          <text class="gui-text-small gui-color-gray gui-text-center gui-margin-x">成绩决定推荐结果及录取概率，请认真填写</text>
          <view class="gui-bg-gray gui-dark-bg-level-3 gui-padding-x gui-margin-top">
            <view>
              <text>预估总分</text>
            </view>
            <view class="gui-bg-white gui-margin-top-small gui-flex" style="padding: 5rpx">
              <text class="gui-form-input gui-icons gui-text-center" style="padding: 0 20rpx">&#xe69e;</text>
              <input v-model.number="formData.score" class="gui-form-input gui-flex1" name="score" placeholder="请输入分数" type="number" />
              <text class="gui-form-input gui-icons gui-text-center" style="padding: 0 20rpx">分</text>
            </view>
          </view>

          <view class="gui-flex gui-row gui-nowrap gui-justify-content-center gui-padding-x" style="margin-top: 100rpx">
            <button
              class="gui-button gui-bg-primary gui-noborder gui-border-radius-full"
              formType="submit"
              style="width: 600rpx"
              type="default"
            >
              <text class="gui-icons gui-color-white gui-button-text">&#xe642; 确认创建</text>
            </button>
          </view>
          <view style="height: 60rpx" />
        </form>
      </view>
    </template>
    <!--    <template v-slot:gFooter>-->
    <!--      <tab-bar></tab-bar>-->
    <!--    </template>-->
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import dayjs from 'dayjs'
const formData = ref<any>({})
const gender = ref<Array<any>>(['请选择年份', dayjs().format('YYYY'), '2023', '2022'])
const genderIndex = ref<number>(0)
const tags1 = ref<Array<any>>([
  { id: 1, text: '文科', checked: false },
  { id: 2, text: '理科', checked: false },
])
const tags2 = ref<Array<any>>([
  { id: 11, text: '化学', checked: false },
  { id: 12, text: '生物', checked: false },
  { id: 13, text: '物理', checked: false },
  { id: 14, text: '历史', checked: false },
])
// picker 切换
const pickerChange = (e: any) => {
  console.log(e)
  genderIndex.value = e.detail.value
  formData.value.year = gender.value[genderIndex.value]
}
const change2 = (e: any) => {
  if (e.length) {
    formData.value.subject = []
    console.log(tags2.value[e])
    e.map((i: number) => formData.value.subject.push(tags2.value[i].text))
  }
}
// 表单提交
const submit = (e: any) => {
  // 能够获得的表单数据 在 e 对象保存
  // 不支持表单直接获取的数据通过事件记录
  // 最终整理获得完整的表单记录
  if (!formData.value.year) {
    uni.showToast({ title: '请选择年份!', icon: 'none' })
    return false
  }
  if (!formData.value.subject) {
    uni.showToast({ title: '请选择科目!', icon: 'none' })
    return false
  }
  if (!formData.value.text) {
    uni.showToast({ title: '请选择科目!', icon: 'none' })
    return false
  }
  if (!formData.value.score) {
    uni.showToast({ title: '请输入分数!', icon: 'none' })
    return false
  }
  console.log(e, formData.value)
  uni.$emit('grade', formData.value)
  uni.navigateBack({ delta: 1 })
}
</script>
<style scoped></style>
